<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p ref="p">{{count}}</p>
        <p>{{doubleCount}}</p>
        <button @click="addCount">count++</button>
    </div>
</body>
<script>

    // Vue的生命周期分为三个阶段
    // 初始化阶段
    // beforeCreate  第一个执行的生命周期钩子函数, 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。(此时 new Vue(options)中的选项配置还未解析  -> 只能使用实例)

    // created
    // 在实例创建完成后被立即同步调用, 此时new Vue(options)中的选项配置已经被解析, 意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数然而，挂载阶段还没开始，且 $el property 目前尚不可用。

    // breforeMount   在挂载开始之前被调用：相关的 render 函数首次被调用 (将template解析为虚拟DOM)


    // mounted  挂载完毕,此时虚拟DOM已经解析为真实DOM 视图已经被更新
    // 一般情况下 更喜欢在组件/Vue实例挂载之后 在做数据处理



    // 更新阶段
    // beforeUpdate   在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
    // updated   在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。此时可以访问更新之后的DOM   。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。


    // 销毁阶段(卸载) 
    // beforeDestroy
    // destroyed

    // 生命周期钩子函数不是必须的,(有没有钩子函数, 生命周期都会正常进行) => 钩子函数的目的可以帮助我们在不同的阶段 查看数据变化或执行一系列操作

    // Vue的特征
    // 1. 声明式渲染
    // 2. 响应式
    var vm = new Vue({
        // el: "#app",
        data: {
            count: 1,
        },
        // template:"",
        methods: {
            addCount(){
                console.log("addCount执行了");
                this.count ++;
            }
        },
        computed: {
            doubleCount(){
                console.log("计算属性doubleCount执行");
                return this.count * 2;
            }
        },
        watch:{
            // count:function(newVal,oldVal){
            //     console.log("count发生了改变",newVal,oldVal);
            // }
        },
        // beforeCreate:function() {
        //     console.log("1. beforeCreate 实例",this);
        //     console.log("1. beforeCreate $data",this.$data);
        //     console.log("1. beforeCreate count",this.count);
        //     console.log("1. beforeCreate 方法",this.addCount);
        //     console.log("1. beforeCreate 计算属性",this.doubleCount);
        //     console.log("1. beforeCreate $el",this.$el);
        // },
        // created:function() {
        //     console.log("2. created 实例",this);
        //     console.log("2. created $data",this.$data);
        //     console.log("2. created count",this.count);
        //     console.log("2. created 方法",this.addCount);
        //     console.log("2. created 计算属性",this.doubleCount);
        //     console.log("2. created 虚拟DOM",this._vnode);
        //     console.log("2. created $el",this.$el);
        // },
        // beforeMount() {
        //     console.log("3. beforeMount 实例",this);
        //     console.log("3. beforeMount $data",this.$data);
        //     console.log("3. beforeMount count",this.count);
        //     console.log("3. beforeMount 方法",this.addCount);
        //     console.log("3. beforeMount 计算属性",this.doubleCount);
        //     console.log("3. beforeMount 虚拟DOM",this._vnode);
        //     console.log("3. beforeMount $el",this.$el);
        // },
        // mounted(){
        //     console.log("4. mounted 实例",this);
        //     console.log("4. mounted $data",this.$data);
        //     console.log("4. mounted count",this.count);
        //     console.log("4. mounted 方法",this.addCount);
        //     console.log("4. mounted 计算属性",this.doubleCount);
        //     console.log("4. mounted 虚拟DOM",this._vnode);
        //     console.log("4. mounted $el",this.$el);
        // },

        beforeUpdate:function() {
            // console.log("5. beforeUpdate 实例",this);
            // console.log("5. beforeUpdate $data",this.$data);
            // console.log("5. beforeUpdate count",this.count);
            // console.log("5. beforeUpdate 方法",this.addCount);
            // console.log("5. beforeUpdate 计算属性",this.doubleCount);
            // console.log("5. beforeUpdate 虚拟DOM",this._vnode);
            // console.log("5. beforeUpdate $el",this.$el);

            console.log("5. beforeUpdate 数据发生了改变,视图还未更新",this.count,this.$refs.p.textContent);
        },
        updated() {
            // console.log("6. updated 实例",this);
            // console.log("6. updated $data",this.$data);
            // console.log("6. updated count",this.count);
            // console.log("6. updated 方法",this.addCount);
            // console.log("6. updated 计算属性",this.doubleCount);
            // console.log("6. updated 虚拟DOM",this._vnode);
            // console.log("6. updated $el",this.$el);
            console.log("6. updated 数据发生了改变,视图也已经更新",this.count,this.$refs.p.textContent);

        },


        
    })
    vm.$mount("#app");

</script>

</html>